<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script src="/ftl/js/jquery.validation/1.14.0/messages_zh.js"></script>
    <style>
        input.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="editUserForm">
        <br/>
        <div class="form-group">
            <label for="username">用户名称</label>
            <input type="text" class="form-control" id="username" name="username" value="${data.name}">
        </div>
        <div class="form-group">
            <label for="userage">用户年龄</label>
            <input type="text" class="form-control" id="userage" name="userage" value="${data.age}">
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">提交修改</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
<script>

    var editUser = function () {
        if (!check().form()) {
            return;
        }

        $.ajax({
            type: "post",
            dataType: "json",
            url: "/update.do",
            data: {
                name: $("#username").val(),
                age: $("#userage").val(),
                id: ${data.id}
            },
            success: function () {
                $("#cancelBtn").click();
            }
        });
    }

    $("#saveBtn").click(function () {
        editUser();
    });

    $("#cancelBtn").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getUserPageList();
        parent.layer.close(index);
    });


    function check() {
        return $("#editUserForm").validate({
            rules: {
                username: {
                    required: true
                },
                userage: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: ""
                },
                userage: {
                    required: ""
                }
            }
        });
    }
</script>
</body>    
    